<template>
    <div v-loading="loading">
        <el-tabs v-model="curPage" @tab-click="onTabClick">
            <el-tab-pane label="自然日" :key="1" name="day"></el-tab-pane>
            <el-tab-pane label="自然时（可视化）" :key="2" name="hour"></el-tab-pane>
        </el-tabs>

        <!-- 搜索组件 -->
        <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" />

        <!-- 表格区域 -->
        <div v-if="curPage === 'day'" class="table-body">
            <!-- 左上角按钮 -->
            <div class="table-right-top"></div>

            <!-- 表格 -->
            <el-table border style="width: 100%;" :data="data" show-summary :summary-method="getSummaries">
                <el-table-column align="center" prop="date" :label="$i18n.t('DATE')" :min-width="120" fixed="left"></el-table-column>
                <el-table-column align="center" prop="first_push_num" :label="$i18n.t('FIRST_PUSH')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="second_push_num" :label="$i18n.t('SECOND_PUSH')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="second_push_rate" :label="$i18n.t('SECOND_PUSH_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="risk_pass_num" :label="$i18n.t('RISK_PASS_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="risk_pass_rate" :label="$i18n.t('RISK_APPROVE_PASS_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="approve_pass_num" :label="$i18n.t('APPROVE_PASS_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="approve_pass_rate" :label="$i18n.t('APPROVE_PASS_RATE')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="make_loan_num" :label="$i18n.t('MAKE_LOAN_NUM')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="make_loan_rate" :label="$i18n.t('MAKE_LOAN_RATE')" :min-width="120" fixed="right"></el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="table-pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, ->, sizes"
                    :page-size.sync="page.perPage"
                    :total="page.total"
                    :page-count="page.pageCount"
                    :current-page.sync="page.currentPage"
                    :page-sizes="PAGES_SIZE"
                    @current-change="onCurrentPageChange"
                    @size-change="onPerPageChange"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 自然时 -->
        <div v-if="curPage === 'hour'">
            <div ref="hour" style="width:100%; height: 600px"></div>
        </div>
    </div>
</template>

<script>
    import SearchForm from '@/components/SearchForm'
    import { getConversionPerformance, getHourConversion } from '@/api/report'
    import { PAGES_SIZE } from '@/config/constants'
    import ECharts from 'echarts/lib/echarts'

    export default {
        name: 'conversionPerformance',
        components: { SearchForm },
        data () {
            return {
                PAGES_SIZE,
                params: {},
                data: [],
                all: {},
                page: {
                    total: 0,
                    currentPage: 1,
                    perPage: PAGES_SIZE[0],
                    pageCount: 1
                },
                loading: false,
                drawer: false,
                mdl: {},
                curPage: 'day'
            }
        },
        created () {
            this.fetch()
        },
        computed: {
            formItems () {
                const LoanType = this.$store.getters.options.LoanedTypeList
                // 构建搜索表单
                return [
                    { title: this.$i18n.t('DATE_RANGE'), type: 'date-range', key: 'date' },
                    { title: this.$i18n.t('LOAN_TYPE'), type: 'select', key: 'loan_type', options: LoanType },
                    { title: this.$i18n.t('CUSTOMER_CHANNEL'), type: 'select', key: 'channel_id', options: this.$store.getters.options.ChannelList },
                    { title: this.$i18n.t('PRODUCT_NAME'), type: 'select', key: 'product_id', options: this.$store.getters.options.ProductList },
                    { title: this.$i18n.t('APPLY_TERM'), type: 'select', key: 'apply_term', options: this.$store.getters.options.ApplyTermList }
                ]
            }
        },
        methods: {
            // 搜索按钮
            onSearch () {
                if (this.curPage === 'day') {
                    this.fetch()
                }
                if (this.curPage === 'hour') {
                    this.fetchHour()
                }
            },
            // 从接口拉取数据
            fetch () {
                this.loading = true
                getConversionPerformance({ ...this.params, page: this.page.currentPage, perPage: this.page.perPage }).then((res) => {
                    // eslint-disable-next-line camelcase
                    const { data, last_page, total, all } = res.result
                    this.data = data
                    this.all = all
                    this.page.total = total
                    // eslint-disable-next-line camelcase
                    this.page.pageCount = last_page
                }).finally(() => {
                    this.loading = false
                })
            },
            // 页数切换
            onCurrentPageChange (page) {
                this.page.currentPage = page
                this.fetch()
            },
            // 每页显示数量修改
            onPerPageChange (perPage) {
                this.page.perPage = perPage
                this.fetch()
            },
            // 统计数据
            getSummaries () {
                return [
                    this.$i18n.t('TOTAL'),
                    this.all.first_push_num,
                    this.all.second_push_num,
                    this.all.second_push_rate,
                    this.all.risk_pass_num,
                    this.all.risk_pass_rate,
                    this.all.approve_pass_num,
                    this.all.approve_pass_rate,
                    this.all.make_loan_num,
                    this.all.make_loan_rate
                ]
            },
            async fetchHour () {
                this.loading = true
                const data = await getHourConversion(this.params)
                this.loading = false
                const { code, result } = data
                let hours = []
                let approvedNum = []
                let passedRate = []
                let repaymentRate = []
                if (code === 200) {
                    hours = result.hours
                    approvedNum = result.approved_num
                    passedRate = result.passwd_rate
                    repaymentRate = result.repayment_rate
                }
                const charts = ECharts.init(this.$refs.hour)
                charts.setOption({
                    color: ['#5470c6', '#fac858', '#91cc75'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['审批完成件数', '审批通过率', '回收率']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: hours,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '审核完成件数',
                            min: 0,
                            interval: 200,
                            axisLabel: {
                                formatter: '{value} 笔'
                            }
                        },
                        {
                            type: 'value',
                            name: '比率',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '审批完成件数',
                            type: 'bar',
                            data: approvedNum
                        },
                        {
                            name: '审批通过率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: passedRate
                        },
                        {
                            name: '回收率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: repaymentRate
                        }
                    ]
                })
            },
            async onTabClick (tab) {
                if (tab.name === 'hour') {
                    this.$nextTick(() => {
                        this.fetchHour()
                    })
                }
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
